<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-page-header style="background-color: #0096dc;color: white;line-height: 60px"
                  @back="goBack" content="添加商品页面">
  </el-page-header>
  <el-card style="width: 600px;height: 700px;margin: 0 auto">
    <el-form label-width="80px">
      <el-form-item label="商品标题"><el-input v-model="p.title" type="text"></el-input></el-form-item>
      <el-form-item label="商品简介"><el-input v-model="p.abs" type="text"></el-input></el-form-item>
      <el-form-item label="商品价格"><el-input v-model="p.price" type="text"></el-input></el-form-item>
<!--      <div class="block">-->
<!--        <span class="demonstration">请选择分类</span>-->
<!--        <el-cascader-->
<!--                :options="options"-->
<!--                :props="props"-->
<!--                clearable></el-cascader>-->
<!--      </div>-->
      <div class="block">
        <span class="demonstration">请选择分类</span>
        <el-cascader
                :options="options"
                :props="props"
                collapse-tags
                clearable></el-cascader>
      </div>

      <el-form-item label="商品图片">
        <el-upload
                action="/upload"
                name="picFile"
                limit="1"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="handleSuccess"
                :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="insert()">添加商品</el-button>
      </el-form-item>
    </el-form>
  </el-card >

</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        props: { multiple: true },
        options: [{
          value: 1,
          label: '活动分类',
          children: [{
            value: 2,
            label: '新品',
          },{
            value: 3,
            label: '生日',
          },
            {
              value: 4,
              label: '聚会',
            },
            {
              value: 5,
              label: '中国印',
            },
            {
              value: 6,
              label: '下午茶',
            },{
              value: 7,
              label: '送全国',
            },{
              value: 8,
              label: '生日卡',
            },]
        },{
          value: 10,
          label: '口味',
          children: [{
            value: 11,
            label: '巧克力',
          },{
            value: 12,
            label: '芝士',
          },
            {
              value: 13,
              label: '慕斯',
            },
            {
              value: 14,
              label: '冰激凌',
            },
            {
              value: 15,
              label: '含酒',
            },{
              value: 16,
              label: '坚果',
            },{
              value: 17,
              label: '奶油',
            },{
              value: 18,
              label: '水果',
            },{
              value: 19,
              label: '咖啡',
            },]
        },{
          value: 21,
          label: '人群',
          children: [{
            value: 22,
            label: '老人',
          },{
            value: 23,
            label: '儿童',
          },
            {
              value: 24,
              label: '孕妇',
            },
            {
              value: 25,
              label: '情侣',
            },]
        },],
        dialogImageUrl: '',
        dialogVisible: false,
        p:{title:"",abs:"",price:"",categoryId:"",url:""}
      }
    },
    methods:{
      insert(){
        if(v.p.url==""){
          v.$message.error("请选择上传的图片!");
          return;
          //发请求
        }
        axios.post("/product/insert",v.p).then(function (response) {
          //回到后台管理页面
          location.href="/admin.html";
        })
      },
      goBack(){
        //返回上一页面
        history.back();
      },
      handleSuccess(response,file,fileList){
        v.p.url=response;
      },
      handleRemove(file, fileList) {
        v.p.url="";
        axios.get("/remove?url="+file.response).then(function () {
          console.log("删除文件完成!");
        })

      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    },
    created:function () {
      //发请求获取所有分类数据
      axios.get("/created/select").then(function (response) {
        v.arr=response.data;
      })
    }
  })
</script>
</html>